<template>
    <view>
        <view class="project_box">
            <view class="project_t">
                <view class="project_t_l">
                    <text class="num">{{ infoList.serviceNo }}</text>
                    <text class="name">{{ infoList.serviceName }}</text>
                </view>
                <!-- <view class="project_t_r">
      <text>修改></text>
    </view> -->
            </view>
            <view class="table_box">
                <view class="table_r">
                    <text class="item">原价</text>
                    <text class="item">折扣</text>
                    <text>售价</text>
                </view>
                <view class="table_l">
                    <text class="item">¥{{ infoList.memberPrice }}</text>
                    <text class="item">{{ infoList.discount || '无' }}</text>
                    <text>¥{{ infoList.discount ? Number(infoList.memberPrice) * Number(infoList.discount) : infoList.memberPrice }}</text>
                </view>
            </view>
        </view>
        <view class="service_box">
            <view class="title">
                <text>服务人员</text>
            </view>
            <view class="service_list" v-for="(item, index) in infoList.selLists" :key="index">
                <view class="service_list_t">
                    <text>设计师：{{ item.name }}</text>
                    <image @tap="delServeOne" :data-index="index" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/trash.png" mode="" />
                </view>

                <view class="service_sel">
                    <view :class="'sel_l ' + (!item.specified ? 'specified_item_sel' : '')" :data-index="index" @tap="changeStatus">
                        <image v-if="!item.specified" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                        <image v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                        <text>非指定</text>
                    </view>
                    <view :class="'sel_r specified_item_av ' + (item.specified ? 'specified_item_sel' : '')" :data-index="index" @tap="changeStatus">
                        <image v-if="item.specified" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                        <image v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                        <text>指定</text>
                    </view>
                </view>

                <view class="service_num">
                    <view class="i_b item">
                        <text>业绩：</text>
                        <input class="inputPci" type="text" :data-index="index" @input="inputResultsPrice" :value="item.resultsPrice" placeholder="请输入" />
                    </view>
                    <view class="i_b">
                        <text>提成：¥</text>
                        <input class="inputPci" type="text" :data-index="index" @input="inputCommissionPrice" :value="item.commissionPrice" placeholder="请输入" />
                    </view>
                </view>
            </view>
            <view class="add_service" @tap="getShowModalselect">
                <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/append.png" mode="" />
                <text>添加服务人员</text>
            </view>
            <view class="service_btn" @tap="complete">
                <text>完成</text>
            </view>
        </view>
        <!-- 增加员工 -->
        <view class="modal-mask2" @tap="hideModal" v-if="showModalselect" @touchmove.stop.prevent="trueFun" style="overflow: visible !important"></view>
        <view v-if="showModalselect" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
            <view class="modal-content" @touchmove.stop.prevent="trueFun" style="overflow: visible !important">
                <view class="qrcodetextbox">
                    <view class="time-box2">
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_lt.png"></image>
                        <view class="qrcodetext">增加员工</view>
                        <image class="time-left" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/time_rl.png"></image>
                    </view>
                    <image class="done" @tap="done" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/done.png"></image>
                </view>

                <view class="qrcodebox">
                    <view class="qrcodetextbox2">
                        <input
                            class="input-phone-up"
                            maxlength="11"
                            @input="blurPhone3"
                            value=""
                            placeholder="请输入姓名，工号，手机号搜索"
                            placeholder-class="placeholder-style2"
                            type="text"
                        />
                        <view class="inquire2" @tap="getStaffInfo">查询</view>
                    </view>
                    <!-- <view class="phone-hint2" wx:if="{{ishint}}">
      输入正确手机号
    </view> -->
                    <scroll-view :scroll-y="true" class="list_box">
                        <view class="replace-box2" v-for="(item, index) in lists" :key="index">
                            <view :data-index="index" @tap="onClick" class="bigbox">
                                <image v-if="item.checkout" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                                <image v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                            </view>

                            <!-- <view wx:else class="bigbox" wx:key="index" data-item="{{item}}" data-stylistid="{{item.stylistId}}" data-nickname="{{item.nickname}}" data-index="{{index}}" bindtap="onClick"></view> -->

                            <view class="replace-lt" :data-index="index" @tap="onClick">
                                <image class="girl2" mode="aspectFill" :src="item.headPicture || 'https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/profile-hai.png'"></image>
                                <view>
                                    <view class="lt-nname_yg">{{ item.name }}</view>
                                    <view class="lt-hpone2">
                                        工号：
                                        <text>{{ item.staffId }}</text>
                                    </view>
                                </view>
                            </view>

                            <view class="hr_list"></view>

                            <view class="specified_box">
                                <view :class="'specified_item ' + (!item.specified ? 'specified_item_sel' : '')" :data-index="index" @tap="changeStatus2">
                                    <image v-if="!item.specified" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                                    <image v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                                    <text>非指定</text>
                                </view>
                                <view :class="'specified_item specified_item_av ' + (item.specified ? 'specified_item_sel' : '')" :data-index="index" @tap="changeStatus2">
                                    <image v-if="item.specified" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_6.png" mode="" />
                                    <image v-else src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/pay_icon_5.png" mode="" />
                                    <text>指定</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <view class="bnt-sell">
                        <view class="bnt-selllt" @tap="bntselllt">取消</view>
                        <view class="bnt-sellrl" @tap="clickSel">确定</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import _request from '../../utils/request';
export default {
    data() {
        return {
            infoList: {
                selLists: '',
                serviceNo: '',
                serviceName: '',
                memberPrice: '',
                discount: ''
            },

            infoData: {},
            memberList: {},
            showModalselect: false,
            lists: [],
            vipIndex: '',
            phone3: '',
            serveData: [],
            serviceIds: ''
        };
    },
    onLoad(o) {
        let data = JSON.parse(uni.getStorageSync('servesList'));
        this.setData({
            infoList: data[Number(o.index)],
            serveData: data,
            infoData: o,
            serviceIds: JSON.parse(o.serviceIds),
            memberList: JSON.parse(o.memberList)
        });
    },
    methods: {
        inputResultsPrice(e) {
            const { index } = e.currentTarget.dataset;
            this.infoList.selLists[index].resultsPrice = e.detail.value;
        },

        inputCommissionPrice(e) {
            const { index } = e.currentTarget.dataset;
            this.infoList.selLists[index].commissionPrice = e.detail.value;
        },

        complete() {
            let data = this.serveData;
            data[Number(this.infoData.index)] = this.infoList;
            uni.setStorageSync('servesList', JSON.stringify(data));
            uni.navigateTo({
                url: `/pagesc/cashierinfo/cashierinfo?memberid=${this.infoData.memberid}&serviceIds=${JSON.stringify(this.serviceIds)}&memberList=${JSON.stringify(
                    this.memberList
                )}`
            });
        },

        getShowModalselect(e) {
            const { index } = e.currentTarget.dataset;
            this.setData({
                showModalselect: true // vipIndex: index
            });
            this.getStaffInfo();
        },

        clickSel() {
            let data = [];
            this.lists.forEach((i) => {
                if (i.checkout) {
                    data.push(i);
                }
            });
            this.infoList.selLists = data;
            this.setData({
                showModalselect: false
            });
        },

        // 点击事件
        onClick(e) {
            const { index } = e.currentTarget.dataset;
            this.lists[index].checkout = !this.lists[index].checkout;
        },

        changeStatus2(e) {
            const { index } = e.currentTarget.dataset;
            console.log(index);
            this.lists[index].specified = !this.lists[index].specified;
            console.log(this.lists);
        },

        bntselllt() {
            this.setData({
                showModalselect: false
            });
        },

        hideModal() {
            this.setData({
                showModalselect: false
            });
        },

        blurPhone3: function (e) {
            var phone = e.detail.value;
            this.setData({
                phone3: phone
            });
        },

        // 查询门店员工
        getStaffInfo() {
            _request
                .get('/cashier/getStaffInfo', {
                    shopId: uni.getStorageSync('shopId'),
                    keyword: this.phone3
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        let dataList = res.data.data;

                        for (let i of dataList) {
                            i.checkout = false;
                            i.specified = false;
                        }

                        if (this.infoList.selLists && this.infoList.selLists.length > 0) {
                            for (let j of this.infoList.selLists) {
                                for (let i of dataList) {
                                    if (j.checkout) {
                                        if (j.staffId === i.staffId) {
                                            i.checkout = true;
                                        }
                                    }

                                    if (j.specified) {
                                        if (j.staffId === i.staffId) {
                                            i.specified = true;
                                        }
                                    }
                                }
                            }
                        }

                        this.setData({
                            lists: dataList
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        changeStatus(e) {
            const { index } = e.currentTarget.dataset;
            this.infoList.selLists[index].specified = !this.infoList.selLists[index].specified;
        },

        delServeOne(e) {
            const { index } = e.currentTarget.dataset;
            console.log(index);
            let data = this.infoList.selLists;
            data.splice(index, 1);
            console.log(this.infoList);
            this.setData({
                'infoList.selLists': data
            });
        },

        trueFun() {
            console.log('占位：函数 true 未声明');
        },

        done() {
            console.log('占位：函数 done 未声明');
        }
    }
};
</script>
<style>
page {
    background: #f1f1f1;
}
.project_box {
    width: 750rpx;
    height: 320rpx;
    background: #ffffff;
    margin-top: 20rpx;
}
.project_t {
    width: 750rpx;
    height: 100rpx;
    border-bottom: 1rpx solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.project_t_l {
    margin-left: 40rpx;
}
.num {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.name {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.project_t_r {
    margin-right: 40rpx;
}
.project_t_r text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.table_box {
    width: 670rpx;
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 38rpx auto;
}
.table_r {
    display: flex;
}
.table_r text {
    display: block;
    width: 222rpx;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx;
    border-bottom: 1rpx solid #e5e5e5;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}
.table_l {
    display: flex;
}
.table_l text {
    display: block;
    width: 222rpx;
    height: 70rpx;
    text-align: center;
    line-height: 70rpx;
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.item {
    border-right: 1rpx solid #e5e5e5;
}
.service_box {
    width: 750rpx;
    height: 950rpx;
    background: #ffffff;
    margin-top: 20rpx;
}
.title {
    margin-left: 41rpx;
    padding-top: 35rpx;
}
.title text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.service_list {
    width: 670rpx;
    height: 280rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 35rpx auto;
}
.service_list_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    border-bottom: 1rpx solid #e5e5e5;
}
.service_list_t text {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 19rpx;
}
.service_list_t image {
    width: 28rpx;
    height: 28rpx;
    margin-right: 19rpx;
}
.service_sel {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1rpx solid #e5e5e5;
}
.sel_l {
    display: flex;
    align-items: center;
}
.sel_l image {
    width: 36rpx;
    height: 36rpx;
}
.sel_l text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 15rpx;
}
.sel_r {
    display: flex;
    align-items: center;
}
.sel_r image {
    width: 36rpx;
    height: 36rpx;
}
.sel_r text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 15rpx;
}
.service_num {
    display: flex;
    align-items: center;
}
.i_b {
    display: flex;
    align-items: center;
}
.service_num view {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    width: 335rpx;
    height: 85rpx;
    line-height: 85rpx;
}
.add_service {
    width: 671rpx;
    height: 201rpx;
    background: #ffffff;
    border: 1rpx dashed #e5e5e5;
    border-radius: 10rpx;
    margin: 60rpx auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.add_service image {
    width: 68rpx;
    height: 68rpx;
}
.add_service text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    margin-top: 30rpx;
}
.service_btn {
    width: 660rpx;
    height: 80rpx;
    background: #e94a18;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 98rpx auto;
}
.service_btn text {
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}
.specified_item_av {
    margin-top: 20rpx;
}
.specified_item_sel text {
    color: #e94a18 !important;
}
.inputPci {
    width: 100rpx;
    margin-left: 10rpx;
}
.modal-mask2 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden !important;
    z-index: 9999;
    color: #fff;
}

.bigbox {
    width: 36rpx;
    height: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30rpx;
}
.bigbox image {
    width: 36rpx;
    height: 36rpx;
}
.bigbox2 {
    width: 30rpx;
    height: 30rpx;
    border: 1px solid #e94a18;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15rpx;
}

.smbox {
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background: #e94a18;
}

.modal-content-showModalhandbrand {
    position: fixed;
    top: 280rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 850rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}

.handbrand-conter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0rpx 20rpx;
    margin-top: 40rpx;
}

.handbrandnumber {
    text-align: center;
    line-height: 80rpx;
    width: 80rpx;
    height: 80rpx;
    background: #e5e5e5;
    border-radius: 10rpx;
    margin: 0 48rpx 48rpx 0;
}

.handbrandnumberac {
    text-align: center;
    line-height: 80rpx;
    width: 80rpx;
    height: 80rpx;
    background: #e94a18;
    border-radius: 10rpx;
    margin: 0 48rpx 48rpx 0;
    color: #fff;
}

.handbrandnumberac:nth-child(5n) {
    margin-right: 0;
}

.handbrandnumber:nth-child(5n) {
    margin-right: 0;
}

.mains {
    height: 516rpx;
    overflow-y: auto;
}

.coupon-mai {
    display: flex;
    height: 67rpx;
    width: 550rpx;
    margin: 0 auto;
    justify-content: space-between;
}

.cancel-bnt {
    text-align: center;
    line-height: 66rpx;
    width: 201rpx;
    height: 67rpx;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
}

.affirm-bnt {
    text-align: center;
    line-height: 66rpx;
    width: 200rpx;
    height: 66rpx;
    background: #e94c19;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2);
    border-radius: 33rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.replace-box2 {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
}
.list_box {
    height: 350rpx;
    overflow-y: auto;
}

.replace-rl {
    width: 120rpx;
    height: 54rpx;
    background: #e94a18;
    border-radius: 27rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 54rpx;
    margin-right: 10rpx;
    text-align: center;
}

.done {
    width: 26rpx;
    height: 26rpx;
    position: absolute;
    top: 18rpx;
    right: 11rpx;
}
.bnt-sell {
    display: flex;
    padding: 0rpx 40rpx;
    justify-content: space-between;
    align-items: center;
    height: 135rpx;
}

.bnt-selllt {
    width: 201rpx;
    text-align: center;
    line-height: 66rpx;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    height: 66rpx;
    border: 1rpx solid #dcdcdc;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(102, 102, 102, 0.2);
    border-radius: 33rpx;
}

.bnt-sellrl {
    text-align: center;
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 66rpx;
    width: 200rpx;
    height: 66rpx;
    background: #e94c19;
    box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(188, 46, 0, 0.2);
    border-radius: 33rpx;
}
.lt-nname_yg {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    display: block;
    width: 100rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hr_list {
    width: 1rpx;
    height: 110rpx;
    background: #e5e5e5;
    margin-left: 70rpx;
}
.specified_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20rpx;
}
.specified_item {
    display: flex;
    align-items: center;
}
.specified_item_av {
    margin-top: 20rpx;
}
.specified_item image {
    width: 30rpx;
    height: 30rpx;
}
.specified_item text {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-left: 10rpx;
}
.specified_item_sel text {
    color: #e94a18 !important;
}
/* 白色背景 */
.modal-content {
    position: fixed;
    top: 380rpx;
    z-index: 9999;
    width: 670rpx;
    margin-left: 40rpx;
    height: 780rpx;
    overflow: visible !important;
    background: #ffffff;
    border: 1rpx solid #e5e5e5;
    box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(102, 102, 102, 0.3);
    border-radius: 10rpx;
}
.qrcodetextbox {
    text-align: center;
    height: 113rpx;
    border-bottom: 1rpx solid #e5e5e5;
}
.time-box2 {
    width: 210rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.time-left {
    width: 21rpx;
    height: 15rpx;
}
.qrcodetext {
    margin: 0 12rpx;
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    line-height: 113rpx;
}
.qrcodetextbox2 {
    display: flex;
    height: 180rpx;
    align-items: center;
}
.input-phone-up {
    width: 590rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1rpx solid #dcdcdc;
    border-radius: 40px;
    margin: 0 auto;
    padding-left: 20rpx;
}
.inquire2 {
    text-align: center;
    width: 120rpx;
    line-height: 60rpx;
    height: 60rpx;
    background: #e94a18;
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    margin-right: 10rpx;
}
.list_box {
    height: 350rpx;
    overflow-y: auto;
}
.replace-box2 {
    width: 590rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(102, 102, 102, 0.16);
    border-radius: 10rpx;
    margin: 20rpx auto;
    display: flex;
    align-items: center;
}
.bigbox {
    width: 36rpx;
    height: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30rpx;
}
.bigbox image {
    width: 36rpx;
    height: 36rpx;
}

.replace-lt {
    display: flex;
    align-items: center;
    height: 80rpx;
    margin-left: 20rpx;
}

.girl {
    width: 80rpx;
    height: 80rpx;
    margin-right: 22rpx;
}

.lt-nname {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    text-align: left;
}

.lt-hpone2 {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}
.girl2 {
    width: 80rpx;
    height: 80rpx;
    margin-right: 29rpx;
    border-radius: 50%;
}
</style>
